<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    centered
    :width="600"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-form :form="form">
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="标题"
      >
        <a-input placeholder="请输入标题" v-decorator="['name', {rules: [{ required: true, message: '请输入标题' }]}]" />
        <a-input v-decorator="['id']" hidden></a-input>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="资讯分类"
      >
        <a-cascader :fieldNames="{ label: 'module', value: 'id', children: 'children' }" :options="moduleOptions"
           v-decorator="['optionsId']" :allowClear="false" placeholder="请选择发送模块" />
      </a-form-item>
      <!-- <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="是否开启轮播"
      >
        <a-switch checkedChildren="开启" unCheckedChildren="关闭" v-decorator="['enableCarousel', {initialValue: true, valuePropName: 'checked'}]" />
      </a-form-item> -->
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="简介"
      >
        <a-input type="textarea" placeholder="请输入简介" v-decorator="['desc', {rules: [{ required: true, message: '请输入简介' }]}]" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { informationCategoryList } from '@/api/content/management'
import { addConfigAppBasisData, editConfigAppBasisData } from '@/api/web/web'
import pick from 'lodash.pick'
export default {
  components: {
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      title: '',
      type: '',
      moduleOptions: []
    }
  },
  beforeCreate () {
  },
  created () {
  },
  methods: {
    add (obj) {
      this.title = obj.title
      this.type = obj.type
      this.getModule()
      this.visible = true
      this.$nextTick(() => {
        this.form.resetFields()
      })
    },
    edit (obj) {
      this.title = obj.title
      this.type = obj.type
      this.getModule()
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(obj.data, 'id', 'name', 'desc'))
        let optionsId = obj.data.optionsId ? obj.data.optionsId.split('/').map(id => Number(id)) : undefined
        this.form.setFieldsValue({
          optionsId
        })
      })
    },
    getModule() {
      informationCategoryList().then((r) => {
        if (typeof r.data !== "object") return;
        this.moduleOptions = r.data
        let item = this.moduleOptions[0]
        if (this.type === 'add') {
          this.moduleValue = [item.id, item.children[0].id]
          console.log('this.moduleValue---->', this.moduleValue)
        }
      });
    },

    handleSubmit (e) {
      var _this = this
      e.preventDefault()
      this.form.validateFields(async (err, values) => {
        if (!err) {
          var data = JSON.parse(JSON.stringify(values))
          data = {
            ...data,
            optionsId: data.optionsId ? data.optionsId.join('/') : undefined,
            typeOptionsId: 1,
            typeOptionsName: '资讯分类',
            type: 3
          }
          let res = {}
          if(this.type === 'add'){
            res = await addConfigAppBasisData(data)
          }else{
            res = await editConfigAppBasisData(data)
          }
          let { code, msg } = res
          _this.$message[code === 0 ? 'success' : 'error'](msg, 1)
          if(code === 0){
            _this.visible = false
            _this.$emit('ok')
          }
        }
      })
    }
  }
}
</script>
<style scoped>
  .tree{
    max-height: 400px;
    overflow: auto;
  }
</style>
